前言回顧

這一章我們會介紹 NG-ZORRO 一些常見的開發問題排查方法，也是對之前的工作的一些補充。因為很多剛接觸 Angular 的同學在使用 NG-ZORRO 過程中，會出現很多看似 "Bug" 且難以解決的問題，卻無法排查到原因，本文也會介紹一下如何快速定位開發過程中出現的問題。

之後我們也會逐步接觸到 NG-ZORRO 原始碼級別的探索。

常見問題

官方整理

官方文件已經為我們整理了一些 常見問題 解決方案，我們挑選幾個最主要的說明一下。

資料修改後頁面為什麼沒有更新

從 7.0 版本開始，NG-ZORRO 元件預設在 OnPush 模式下工作，那麼什麼是 OnPush？

OnPush 意味著只有在輸入發生變化時才執行元件的髒值檢測，並且當輸入發生變化時，它們的整個物件必須發生變化。如果物件引用不變，則不會執行髒值檢測。
從 Angular OnChanges() 也可以看出，Angular 不會關注這個物件的屬性的變化。物件的引用沒有發生變化，於是從 Angular 的視角看來，也就沒有什麼需要報告的變化了。

舉個例子，在使用 Table 元件時，如果對源資料陣列進行 array.push/splice 操作，這並不會更改物件引用，所以頁面並不會發生更新，我們應該這樣使用，... 操作符 ：

// 增加資料
this.dataSet = [ ...this.dataSet, {
  key    : `${this.i}`,
  name   : `Edward King ${this.i}`,
  age    : '32',
  address: `London, Park Lane no. ${this.i}`
}];
// 刪除資料
this.dataSet = this.dataSet.filter(d => d.key !== i);

樣式問題

覆蓋元件樣式

修改全域性主題預設樣式

通常，所有元件都是以 class 屬性來設定樣式，字首均以 ant- 開頭，所以我們在覆蓋 css 時只要找到通過 Chrome console 找到元素的 class 來複寫即可，參考一下 這個例子，這樣我們就很容易修改按鈕文字顏色：

@Component({
  template: `
    <button nz-button>Button</button>
  `,
  styles: [
    `.ant-btn {
        color: orange;
      }
    `]
})

::ng-deep 修改樣式

但是有一些情況，我們發現直接使用 class 屬性不起作用，這是因為有些屬性是通過 @Input() 屬性接受後按條件渲染其下級元件，我們可以用 ::ng-deep 複寫（線上示例）：

@Component({
  template: `<nz-alert nzType="success" nzMessage="Success Text"></nz-alert>`,
  styles: [
    `.ant-alert-message { color: red; }`
  ]
})

styles.less 內修改樣式

但是以上方法對於彈窗功能的元件無能為力，因為彈窗元件(如 Modal、Drawer、Notification等)，這些元件彈窗功能都是基於 Material CDK Overlay 開發，所以樣式脫離了當前元件，我們需要在 styles.less (或者在其內部 @import 樣式檔案內複寫)。

問題幫助

對於 Angular 專案來說，如果出現問題，在 console 工具中一般會顯示具體的錯誤資訊，我們只需要將錯誤資訊複製查詢即可得到很多有價值的資訊。

Angular的相關問題可以在 Google 或者 百度 上搜索 關鍵字 -angularjs 來避免 angularjs 的干擾，例如 angular ngmodel -angularjs。

總結 & 預告

今天我們簡單介紹了 Angular 專案中使用 NG-ZORRO 出現問題時如何去尋找解決方案，除了充分利用瀏覽器 console 工具，還可以前往 Github Issue 列表查詢相關元件問題，當然，如果你發現任何不符合元件說明的表現，同樣可以通過 報告 Bug 方式提交給開源社群。

下面剩下的時間裡，我們會以一個簡單元件介紹 NG-ZORRO 是如何開發的，幫助大家瞭解元件庫開發流程，以及如何參與元件庫的社群貢獻。

相關資料

• OnPush：https://angular.tw/api/core/ChangeDetectionStrategy
• OnChanges：https://angular.tw/guide/lifecycle-hooks#onchanges
• Angular 元件樣式：https://angular.tw/guide/component-styles